import Swiper from '_c/swiper';

import './index.scss';

const ICON_SRC = 'https://blog-assets.jiandaoyun.com/index/home/home_corp_icon.png';
const IMG_SRC = 'https://blog-assets.jiandaoyun.com/index/home/home_corp';
const LOGO_SRC = 'https://blog-assets.jiandaoyun.com/index/home/home_corp_logo';

const SWIPER_ITEM = [
  {
    text: '简道云的零代码开发在更大的范围内，让业务用户感受到数字化转型带来的效果，加速了数字化的落地；同时在需要不断尝试的业务场景中，零代码的快速开发迭代提供了很低的试错成本，孵化了一批新工具新方法。',
    name: '郑炯',
    position: '蒙牛乳业信息技术高级总监',
    video: 'https://market.jdycdn.com/%E8%92%99%E7%89%9B%E9%87%87%E8%AE%BF.mp4',
  },
  {
    text: '零代码开发这种无门槛的开发方式盘活了全公司信息化推进的热情和效率，简道云也打破了原先集团信息化一阶段的数据孤岛困局。未来企业发展将继续向数据要生产力，这不单单是信息部门的工作。',
    name: '伍学纲',
    position: '东方日升新能源股份有限公司 CIO',
    video:
      'https://market.jdycdn.com/0520%E4%B8%9C%E6%96%B9%E6%97%A5%E5%8D%87%EF%BC%88vx%EF%BC%89.m4v',
  },
  {
    text: '对中国赛艇协会来说，简道云把各模块的数据整合到了一起，且能很便捷地实现个性化分析，工作效率得到质的提升。现在赛艇协会产生数据方面的新业务需求时，就会直接用简道云迅速开发出一套demo，这些需求基本上都可以在一天内完成。',
    name: '谭威正',
    position: '中国赛艇协会 数据总监',
    video: 'https://market.jdycdn.com/China%20rowing%20zhongguosaiting.mp4',
  },
  {
    text: '龙辉利用简道云的零代码开发平台，针对企业管理和生产的不同场景，一年时间开发了200多个应用，实现低成本、高效能实现数字化管理。',
    name: '和大龙',
    position: '山东龙辉起重机械有限公司 CEO',
    video: 'https://market.jdycdn.com/%E9%BE%99%E8%BE%89%E8%B5%B7%E9%87%8D.m4v',
  },
  {
    text: '开发者就是应用者，应用者就是开发者。我们通过简道云平台搭建了学校基本所有的管理的场景，而且这些应用都来自于老师们的提议，所以大家对于这些应用就有了情感。',
    name: '刘公社',
    position: '河南扶沟实验小学 校长',
    video:
      'https://market.jdycdn.com/0510%E6%89%B6%E6%B2%9F%E5%8E%BF%E5%AE%9E%E9%AA%8C%E5%B0%8F%E5%AD%A6%EF%BC%88%E7%BB%88%EF%BC%89.m4v',
  },
  {},
];

export default function Process({ playVideo }) {
  function tabRenderFn(item, index) {
    return index !== SWIPER_ITEM.length - 1 ? (
      <img src={`${LOGO_SRC}${index + 1}.png`} alt="" />
    ) : (
      <span style={{ width: '100%' }} onClick={e => e.stopPropagation()}>
        <span>查看更多&gt;&gt;</span>
      </span>
    );
  }

  function getSwipwerItemNode(item, index) {
    return index === SWIPER_ITEM.length - 1 ? (
      <div key={index}></div>
    ) : (
      <div className="slide-content" key={index}>
        <span className="img-corp video-btn" onClick={() => playVideo(item.video)}>
          <img className="corp-logo-pc" src={`${IMG_SRC}${index + 1}.png`} alt="" />
        </span>
        <div className="txt-box">
          <div className="txt-content">
            <img src={`${LOGO_SRC}${index + 1}.png`} alt="" />
            <div className="text-info">
              {item.text}
              <img src={ICON_SRC} alt=""/>
            </div>
            <span className="text-name">
              {item.name}
              <span className="color-grey">{item.position}</span>
            </span>
            <span className="look-more">查看使用方案 &gt;&gt;</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="corp-value">
      <div className="bricks">
        <div className="bricks-primary-title">把想法快速变成现实，为企业贡献多元价值</div>
        <div className="bricks-description">
          不同规模与性质的企业和组织都能找到适合的零代码解决方案
        </div>
        <Swiper
          tabRenderFn={tabRenderFn}
          slideRenderFn={getSwipwerItemNode}
          swiperList={SWIPER_ITEM}
          width={1172}
          duration={0.3}
          trigger={'click'}
        ></Swiper>
      </div>
    </div>
  );
}
